<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轩正公司管理系统 - 忘记密码</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/watermark.css">
    <style>
        /* 确保按钮文字居中 */
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>忘记密码</h1>
        </div>
        
        <div class="login-container">
            <div id="alert-box" class="alert"></div>
            
            <form id="reset-form" action="resetPassword" method="POST">
                <div class="form-group">
                    <label for="name">真实姓名</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入真实姓名" required>
                </div>
                
                <div class="form-group">
                    <label for="idCard">身份证号码</label>
                    <input type="text" class="form-control" id="idCard" name="idCard" placeholder="请输入18位身份证号码" maxlength="18" required>
                </div>
                
                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入注册时使用的手机号码" maxlength="11" required>
                </div>
                
                <div class="form-group">
                    <label for="new-password">新密码</label>
                    <input type="password" class="form-control" id="new-password" name="newPassword" placeholder="请输入新密码" required>
                </div>
                
                <div class="form-group">
                    <label for="confirm-password">确认新密码</label>
                    <input type="password" class="form-control" id="confirm-password" placeholder="请再次输入新密码" required>
                </div>
                
                <div class="btn-container">
                    <button type="submit" class="btn btn-primary">重置密码</button>
                    <button type="button" class="btn btn-secondary" onclick="window.location.href='index.html'">返回登录</button>
                </div>
            </form>
        </div>
    </div>

    <script src="js/watermark.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const resetForm = document.getElementById('reset-form');
            const confirmPasswordInput = document.getElementById('confirm-password');
            const newPasswordInput = document.getElementById('new-password');
            const idCardInput = document.getElementById('idCard');
            const phoneInput = document.getElementById('phone');
            const alertBox = document.getElementById('alert-box');
            
            // 检查URL参数，如果有error参数，显示错误信息
            const urlParams = new URLSearchParams(window.location.search);
            const errorMessage = urlParams.get('error');
            if (errorMessage) {
                showAlert(decodeURIComponent(errorMessage), 'danger');
            }
            
            // 表单提交前验证
            resetForm.addEventListener('submit', function(event) {
                // 验证密码是否匹配
                if (newPasswordInput.value !== confirmPasswordInput.value) {
                    showAlert('两次输入的密码不一致', 'danger');
                    event.preventDefault();
                    return false;
                }
                
                // 验证密码长度
                if (newPasswordInput.value.length < 6) {
                    showAlert('新密码长度不能少于6位', 'danger');
                    event.preventDefault();
                    return false;
                }
                
                // 验证身份证号码长度
                if (idCardInput.value.length !== 18) {
                    showAlert('身份证号码必须是18位', 'danger');
                    event.preventDefault();
                    return false;
                }
                
                // 验证手机号长度
                if (phoneInput.value.length !== 11) {
                    showAlert('请输入有效的11位手机号码', 'danger');
                    event.preventDefault();
                    return false;
                }
                
                return true;
            });
            
            // 添加输入限制，只允许输入数字和X
            idCardInput.addEventListener('input', function() {
                this.value = this.value.replace(/[^\dXx]/g, '');
            });
            
            // 添加输入限制，只允许输入数字
            phoneInput.addEventListener('input', function() {
                this.value = this.value.replace(/\D/g, '');
            });
            
            // 显示警告信息
            function showAlert(message, type = 'danger') {
                alertBox.textContent = message;
                alertBox.style.display = 'block';
                
                // 根据类型设置不同的样式
                alertBox.className = 'alert';
                if (type === 'success') {
                    alertBox.classList.add('alert-success');
                } else if (type === 'danger') {
                    alertBox.classList.add('alert-danger');
                } else if (type === 'info') {
                    alertBox.classList.add('alert-info');
                }
                
                // 3秒后自动隐藏
                setTimeout(function() {
                    alertBox.style.display = 'none';
                }, 3000);
            }
        });
    </script>
</body>
</html> 